<template>
  <Page
    class="my-page"
    :total="value.total"
    @on-change="change($event, page)"
    @on-page-size-change="change($event, size)"
    :page-size="value.pageSize"
    :current="value.pageIndex"
    :page-size-opts="pageSizeList"
    show-total
    show-sizer
  />
</template>

<script>
/**
 * 表示每页显示条数
 */
const size = "size";
/**
 * 表示当前页码
 */
const page = "page";
export default {
  name: "MyPage",
  data() {
    return {
      size,
      page,
      /**
       * 数据呈现数量集合
       */
      pageSizeList: [10, 20, 30, 40, 50, 100],
    };
  },
  methods: {
    /**
     * 更改分页
     */
    change(value, type) {
      const obj = { ...this.value };
      if (type === size) {
        obj.pageIndex = 1;
        obj.pageSize = value;
      } else if (type === page) {
        obj.pageIndex = value;
      }
      this.$emit("input", obj);
      this.$emit("change", obj);
    },
  },
  props: {
    /**
     * 分页模型
     */
    value: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style scoped>
.my-page >>> .ivu-select {
  position: relative;
}
</style>